<!-- 添加頁面 -->
<template>
  <div class="addshop">
    <!-- 添加进度 头 -->
    <div class="addshop_header">
      <el-steps :active="active" finish-status="success">
        <el-step title="添加秒杀商品"></el-step>
        <el-step title="填写基本信息"></el-step>
        <el-step title="其他设置"></el-step>
        <el-step title="规格设置"></el-step>
      </el-steps>
    </div>
    <keep-alive>
      <component v-bind:is="actives" ref="activeshop" class="Activeshop"
    /></keep-alive>

    <div class="axtss">
      <el-button
        type="primary"
        style="margin-top: -40px"
        @click="Laststep"
        v-if="active !== 0"
        >上一步</el-button
      >
      <el-button style="margin-top: -80px" type="primary" @click="next">{{
        active !== 3 ? "下一步" : "完成"
      }}</el-button>
    </div>
  </div>
</template>

<script>
import OneShop from "./One_shop";
import TowShop from "./Two_shop ";
import ThreeShop from "./Three_shop ";
import FourShop from "./Four_shop";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    OneShop,
    TowShop,
    ThreeShop,
    FourShop
  },
  data() {
    //这里存放数据
    return {
      actives: "OneShop",
      active: 0,
      formObj: {},
      sellData: [],
      total: 0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    active() {
      this.step();
    }
  },
  //方法集合
  methods: {
    //上一步
    Laststep() {
      this.active--;
      this.step();
    },
    //   下一步
    next() {
      switch (this.active) {
        case 0:
          this.$refs.activeshop.submitForm("ruleForm").then(
            res => {
              // assign 合并对象  合并信息
              Object.assign(this.formObj, this.$refs.activeshop.ruleForm);
              this.active += 1;
            },
            err => {
              this.$message.error("请输入商品信息");
            }
          );
          break;
        case 1:
          // 合并富文本框
          if (this.$refs.activeshop.editorContent) {
            Object.assign(this.formObj, {
              content: this.$refs.activeshop.editorContent
            });
            this.active += 1;
          } else {
            this.$message.error("请输入商品详情");
          }
          break;
        case 2:
          if (this.$refs.activeshop.other) {
            // 合并其他设置
            Object.assign(this.formObj, { other: this.$refs.activeshop.other });
            this.active += 1;
          }
          break;

        case 3:
          this.$router.push("/marketing/management/allocation");
          if (this.$refs.activeshop.other) {
            // 合并其他设置
            Object.assign(this.formObj, { other: this.$refs.activeshop.other });
            this.active += 1;
            axios({
              url: "/Commodity",
              method: "post"
            }).then(res => {
              this.sellData = res.data.data;
              // this.total = res.data.total;
              console.log(res);
            });
            sellData.push({
              Isgrouping: false,
              Sellingprice: 92,
              id: 3,
              img:
                "https://img.alicdn.com/imgextra/i4/2549841410/O1CN01Gmtaep1MHp7cgQXUp_!!2549841410-0-sm.jpg_430x430q90.jpg",
              name: "力需党青况新内教如层合区电他需制干运效",
              sort: 171,
              stock: 46085,
              times: "2020-06-17",
              type: 0,
              volume: 93
            });
            this.total = res.data.total += 1;
          }
          break;
      }
    },
    // step步判断
    step() {
      switch (this.active) {
        case 0:
          this.actives = "OneShop";
          break;
        case 1:
          this.actives = "TowShop";
          break;
        case 2:
          this.actives = "ThreeShop";
          break;
        case 3:
          this.actives = "FourShop";
          break;
        default:
          this.$router.push("/layout/shopAmd");
          this.actives = "OneShop";
          break;
      }
    },

    //
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang="scss">
.addshop {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: #fff;
  padding: 20px 0;
  // box-shadow: 0 0 10px #cccc;
  .addshop_header {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平方向 居中*/
    align-items: center;
    padding: 5px 15%;
    border-bottom: 1px #cccc solid;
    margin-bottom: 10px;
    .el-steps {
      flex: 1;
    }
  }
  .Activeshop {
    flex: 1;
    overflow-y: auto;
  }
  .axtss {
    width: 100%;
    height: 40px;
    // background: ;
    padding: 20px;
  }
}
</style>
